<template>
  <div class="sidebar-box">
    <!-- 折叠按钮 -->
    <div class="sidebar-btn" @click="collapseChage" :collapse="collapse">
      <i class="el-icon-menu-slide"></i>
    </div>
    <div class="sidebar">
      <el-menu
        class="sidebar-el-menu"
        :default-active="onRoutes"
        :collapse="collapse"
        text-color="#aaa"
        active-text-color="#fff"
        unique-opened
        router
      >
        <template v-for="item in items">
          <template v-if="item.subs">
            <el-submenu :index="item.index" :key="item.index">
              <template slot="title">
                <i :class="item.icon"></i>
                <span slot="title">{{ item.title }}</span>
              </template>
              <template v-for="subItem in item.subs">
                <el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
                  <template slot="title">{{ subItem.title }}</template>
                  <el-menu-item
                    v-for="(threeItem,i) in subItem.subs"
                    :key="i"
                    :index="threeItem.index"
                  >{{ threeItem.title }}</el-menu-item>
                </el-submenu>
                <el-menu-item v-else :index="subItem.index" :key="subItem.index">{{ subItem.title }}</el-menu-item>
              </template>
            </el-submenu>
          </template>
          <template v-else>
            <el-menu-item :index="item.index" :key="item.index">
              <i :class="item.icon"></i>
              <span slot="title">{{ item.title }}</span>
            </el-menu-item>
          </template>
        </template>
      </el-menu>
    </div>
  </div>
</template>

<script> 
import bus from "./bus.js";
export default {
  data() {
    return {
      collapse: false,
      items: [
        {
          icon: "el-icon-menu-home",
          index: "index",
          title: "首页"
        },
        {
          icon: "el-icon-menu-a",
          index: "shop",
          title: "店铺管理",
          subs: [
            {
              index: "goodsList",
              title: "商品列表"
            },
            {
              index: "shopInfo",
              title: "店铺信息"
            }
          ]
        },
        {
          icon: "el-icon-menu-b",
          index: "privilege",
          title: "权限管理",
          subs: [
            {
              index: "clerkList",
              title: "店员列表"
            }
          ]
        },
        {
          icon: "el-icon-menu-c",
          index: "information",
          title: "信息管理"
        },
        {
          icon: "el-icon-menu-d",
          index: "article",
          title: "文章动态",
          subs: [
            {
              index: "publish",
              title: "发布文章"
            },
            {
              index: "articleList",
              title: "文章列表"
            }
          ]
        },
        {
          icon: "el-icon-menu-e",
          index: "user",
          title: "用户管理",
          subs: [
            {
              index: "expenseList",
              title: "用户消费列表"
            }
          ]
        },
        {
          icon: "el-icon-menu-f",
          index: "financing",
          title: "财务对账",          
          subs: [
            {
              index: "record",
              title: "核销记录"
            },
            {
              index: "deposit",
              title: "余额明细"
            } 
          ]
        }
      ]
    };
  },
  computed: {
    onRoutes() {
      return this.$route.path.replace("/", "");
    }
  },
  created() {
    // 通过 Event Bus 进行组件间通信，来折叠侧边栏
    bus.$on("collapse", msg => {
      this.collapse = msg;
    });
  },
  mounted() {
    if (document.body.clientWidth < 1500) {
      this.collapseChage();
    }
  },
  methods: {
    // 侧边栏折叠
    collapseChage() {
      this.collapse = !this.collapse;
      bus.$emit("collapse", this.collapse);
    }
  }
};
</script>


<style scoped lang="scss">
.sidebar-box {
  width: 220px;
  height: 100%; 
}
.sidebar-btn {
  height: 56px;
  line-height: 56px;
  cursor: pointer;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.sidebar-btn i.el-icon-menu-slide {
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url("../../assets/images/icon/menu-slide.png") no-repeat;
}
.sidebar-el-menu {
  background: none;
}
.sidebar {
  display: block;
  position: absolute;
  left: 0;
  top: 126px;
  bottom: 0;
  overflow-y: scroll;
}
.sidebar::-webkit-scrollbar {
  width: 0;
}
.sidebar-el-menu:not(.el-menu--collapse) {
  width: 220px;
}
.sidebar > ul {
  height: 100%;
}
.sidebar-el-menu .el-menu--inline li,
.sidebar-el-menu .el-submenu span,
.sidebar-el-menu .el-menu-item span {
  font-size: 16px;
}
//图标
.el-submenu [class^="el-icon-"],
.el-menu-item [class^="el-icon-"] {
  height: 24px;
  margin-right: 15px;
}
.el-icon-menu-home {
  background: url("../../assets/images/icon/menu-home.png") no-repeat;
}
.el-icon-menu-a {
  background: url("../../assets/images/icon/menu-a.png") no-repeat;
}
.el-icon-menu-b {
  background: url("../../assets/images/icon/menu-b.png") no-repeat;
}
.el-icon-menu-c {
  background: url("../../assets/images/icon/menu-c.png") no-repeat;
}
.el-icon-menu-d {
  background: url("../../assets/images/icon/menu-d.png") no-repeat;
}
.el-icon-menu-e {
  background: url("../../assets/images/icon/menu-e.png") no-repeat;
}
.el-icon-menu-f {
  background: url("../../assets/images/icon/menu-f.png") no-repeat;
}
</style>


<style>
 
.el-menu{
  border-right: none;
}
.el-menu,
.el-dropdown-menu__item--divided:before,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal > .el-menu-item:not(.is-disabled):hover,
.el-menu--horizontal > .el-submenu.el-submenu__title:hover,
.sidebar-el-menu .el-menu {
  background: #10131f;
} 
.el-menu.el-menu--inline .el-menu-item {
  text-indent: 20px;
}
</style>
